import TauTable from '@/components/TauTable';
import { useStore } from '@/hooks';
import { t } from '@lingui/macro';
import { uniqueId } from 'lodash';
import { observer } from 'mobx-react-lite';
import React, { useEffect } from 'react';
import { column } from '../stores/definitions_comment';

const tableId = uniqueId('tauTable-');

const CommentInfo = (props) => {
  const { orderId } = props;
  const { ccOrderStore: store } = useStore();

  useEffect(() => {
    store._commentArgs.search = {
      orderId,
    };
  }, [orderId]);

  return (
    <>
      <TauTable
        instanceId={tableId}
        tableLayout="fixed"
        currentPage={store._commentArgs.pg.page}
        pageSize={store._commentArgs.pg.size}
        total={store._commentArgs.total}
        sort={store._commentArgs.tableSort}
        onFetch={(pg) => { store._commentArgs.pg = pg; }}
        loading={store._commentArgs.loading}
        dataSource={toJS(store._commentArgs.dataSource)}
        columns={[
          { title: t`序号`, dataIndex: 'idx', width: 44, cell: (v, i) => store._commentArgs.idx(i) },
          column('reviewerName', {}),
          column('commentDate', {}),
          column('star', {}),
          column('comment', {}),
          column('commentedBy', {}),
        ]}
      />
    </>
  );
};

export default observer(CommentInfo);
